﻿{extend name="public:base" /}

{block name="css"}
<style>
    #box {
        display: flex;
        flex-direction: column;
    }

    .file-box {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        margin-left: 0;
        width: 300px;
    }

    .file-box .name {
        border: 1px solid #f1f1f1;
        padding: 5px 0;
        width: 300px;
        text-align: center;
    }

    .file-box .del {
        border: 1px solid #f1f1f1;
        border-left: none;
        padding: 5px 10px;
        color: #000;
    }
</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="box-item">
                        <div class="form-group row">
                            <div class="col-sm-1">
                                <button type="button" class="btn btn-w-m btn-primary" id="uploadBtn">上传文件</button>
                                <input type="file" id="file" accept=".doc, .docx, .xls, .xlsx" style="display: none">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                    </div>
                    <div class="box-item">
                        <div class="form-group row" id="box">
                            {volist name="list" id="vo"}
                            <div class="col-sm-3 file-box">
                                <div class="name">{$vo.name}</div>
                                <a href="{:url('delProjectFile', ['id' => $vo['id']])}" class="del iconfont icon-close ajax-operate"></a>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script>
    $('#uploadBtn').on('click', function () {
        $('#file').click();
    });

    $('#file').on('change', function (event) {
        var fileInput = $(this);
        var files = fileInput[0].files;
        if (files.length > 0) {
            var formData = new FormData();
            var name = files[0].name;

            formData.append('download', files[0]);
            formData.append('name', name);

            $.ajax({
                url: "{:url('/upload/uploadFile/uploadFile')}", // 替换为你的文件上传接口
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: res => {
                    if (res.status == 1) {
                        var file_id = res.data.id;

                        $.post({
                            url: "{:url('/admin/Manage/insertProjectFile')}",
                            data: {
                                name, file_id, type: 2
                            },
                            success: result => {
                                var result = JSON.parse(result);
                                if(result.result == 1){
                                    layer.msg(result.msg, {icon: 1})
                                    setTimeout(() => {
                                        window.location.reload();
                                    },1000)
                                }else{
                                    layer.msg(result.msg, {icon: 2})
                                }
                            }
                        })
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    layer.msg('文件上传失败，请重试', {icon: 2})
                }
            });
        }
    });

    $('.del').click(() => {

    })

</script>{/block}
